<template>
  <div class="app">
    <header>
      <router-view name="header" />
    </header>
    <main>
      <keep-alive include="Category">
        <router-view />
      </keep-alive>
    </main>
    <footer>
      <router-view name="footer" />
    </footer>

    <!-- App
    <router-view />

    <tabbar :list="list"></tabbar>

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>

<script>
import axios from 'axios'

// import Tabbar from './components/tabbar/Tabbar.vue'
export default {
  name: 'App',
  // data() {
  //   return {
  //     active: 0,
  //     list: [
  //       { icon: 'home-o', text: '首页', pagePath: '/home' },
  //       { icon: 'cart-o', text: '购物车', pagePath: '/cart' },
  //       { icon: 'user-o', text: '我的', pagePath: '/mine' },
  //     ],
  //   }
  // },
  // components: {
  //   Tabbar,
  // },
  created() {
    axios
      .get('/163/item/cateList.json?__timestamp=1663740668769&categoryId=')
      .then(console.log)
      .catch(console.error)

    // axios.get('/zs/api/xxxx')

    axios.get('/api/tab/1')
      .then(console.log)
      .catch(console.error)
  },
}
</script>

<style lang="less">
  html, body, .app {
    height: 100%;
  }

  .app {
    display: flex;
    flex-direction: column;

    main {
      flex: 1;
      overflow: auto;
    }
  }
</style>
